<template>
	<!-- 规格选取弹窗 -->
	<view class="specBox" @touchmove.prevent.stop>
		<uni-popup ref="specBox" type="center">
			<scroll-view scroll-y class="specBoxContent" v-if="specShow">
				<view class="specContent">
					<view>{{ specInfo.foodName }}</view>
					<view class="specList" v-for="(item, index) in specifications" :key="index">
						<view class="">{{ item.type }}</view>
						<view class="">
							<view v-for="(specItem, specIndex) in item.items" :key="specIndex"
								:class="{ specCheckList: specItem.checked }"
								@click="changeSpecCheck(item,index,specIndex)">
								<view class="">{{ specItem.name }}</view>
							</view>
						</view>
					</view>
					<view class="specCheckContent">
						已选规格：<text v-for="item in specification">{{item.name}}</text>
					</view>
				</view>
				<view class="specControl">
					<view class="">
						总计
						<text>￥{{ specInfo.showPrice }}</text>
					</view>
					<view class="" @click="changeShopNum('spec')">加入购物车</view>
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		addShoppingCart,
	} from "@/request/api.js";
	export default {
		name: "specBox",
		props: {
			specInfo: {
				type: Object,
				default: {}
			},
			addressId: {
				type: String,
				default: ""
			},
			storeDetail: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				specShow: false,
				total: '',
				specifications: [],
				specification: []
			};

		},
		watch: {
			specInfos: {
				handler(val) {
					// let total = val.reduce((sum,item)=> sum + item.price,0 )
					// this.total = total;
				},
				deep: true,
				immediate: true
			}
		},
		mounted() {

		},
		methods: {
			showSpec() {
				this.specification = [];
				this.specifications = this.specInfo.specifications;
				this.specifications.map((item, index) => {
					item.items.map((items, indexs) => {
						let isFind = (indexs == 0);
						this.$set(this.specifications[index].items, indexs, {
							...items,
							checked: isFind
						});
						items.checked = isFind
						isFind && this.specification.push({
							...items,
							type: item.type
						})

					})
				})
				this.$refs.specBox.open('center')
				this.specShow = true;
				console.log(this.specInfo.specifications, 'this.specInfo.specifications');
			},
			async changeShopNum() {
				let userInfo = uni.getStorageSync("userInfo")
				let food = this.specification.find(item => item.limitCount < 1)
				if (food) {
					// this.$showToast(this, `${food.name}库存不足，无法继续添加`, 'fail');
					uni.showToast({
						title: `${food.name}库存不足，无法继续添加!`,
						icon: "none"
					})
					return;
				}
				console.log(this.storeDetail)
				// return;
				let params = {
					"menuId": userInfo.menuId,
					"phone": userInfo.phoneNumber,
					// "siteAddressId": this.addressId,
					"storeId": this.storeDetail.storeId,
					// "storeName": this.storeDetail.storeName,
					"foodId": this.specInfo.foodId,
					// "foodName": this.specInfo.foodName,
					"count": 1,
					// "salePrice": this.specInfo.salePrice,
					"specification": this.specification.map(item => ({
						id: item.id,
						name: item.name,
						type: item.type
					}))
				}
				// this.$store.commit('addShopCar', params);
				let res = await addShoppingCart({
					method: "POST",
					data: params,
				})
				if (res.code == 200) {
					uni.showToast({
						title: "添加成功",
						type: 'none',
					})
					this.$refs.specBox.close()
					this.$emit('getShopCar')
				} else {
					uni.showToast({
						title: res.message,
						type: 'none',
					})
				}
			},
			changeSpecCheck(item, index, indexs) {
				item.items.map((items, indexs1) => {
					this.$set(items, 'checked', indexs == indexs1)
					if (indexs == indexs1) {
						this.specification[index] = {
							...items,
							type: item.type
						}
					}
				})
				console.log(this.specification, "this.specification");
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 规格
	.specBox {
		/deep/.uni-popup__wrapper {
			min-height: auto;
			background: #fff;
		}

		.specBoxContent {
			width: 630rpx;
			background: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			max-height: 90vh;
		}

		;

		.specContent {
			min-height: 20vh;
			position: relative;

			>view:nth-child(1) {
				font-size: 36rpx;
				line-height: 1;
				font-weight: bold;
				margin-bottom: 32rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			>.specList {
				margin-bottom: 20rpx;

				>view {
					@include flexs();
					flex-wrap: wrap;
					font-size: 24rpx;
					line-height: 1.5;

					&:nth-child(1) {
						font-size: 32rpx;
						margin-bottom: 20rpx;
					}

					&:nth-child(2) {
						>view {
							margin: 0 20rpx 20rpx 0;
							@include flexs();
							margin-right: 20rpx;
							border-radius: 10rpx;
							overflow: hidden;
							// background:rgba(235, 91, 30,.1);
							border: 1rpx solid #999999;
							color: #999999;
							line-height: 2;

							>view {
								padding: 5rpx 12rpx;

								&:nth-child(2) {
									border-left: 1px solid rgba(0, 0, 0, 0.1);
									color: #f50000;
									// background-color: #f5f5f5;
								}

								&:nth-child(1) {
									// background-color: #f5f5f5;
								}
							}
						}

						>.specCheckList {
							border: 1px solid #fa690a;

							>view {
								&:nth-child(1) {
									color: #fa690a;
									background-color: #fff8f0;
								}

								// &:nth-child(2) {
								// 	border-left: 1px solid #fa690a;
								// 	background-color: #fff8f0;
								// }
							}
						}
					}
				}
			}
		}

		.specCheckContent {
			font-size: 28rpx;

			text {
				margin-right: 8rpx;
			}
		}

		.specControl {
			background: #fff;
			@include flexs(space-between, center);
			padding-top: 50rpx;

			>view:nth-child(1) {
				font-size: 28rpx;
				color: #FA1515;

				text {
					font-size: 40rpx;
					font-weight: bold;
					margin-left: 10rpx;
				}
			}

			>view:nth-child(2) {
				color: #fff;
				font-size: 28rpx;
				width: 200rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 10rpx;
				background-color: #EB5B1E;
				display: block;
				text-align: center;
				margin-left: 20rpx;
			}
		}
	}
</style>